<!--
 * @Author: lmk
 * @Date: 2022-04-14 14:27:07
 * @LastEditTime: 2022-05-08 12:22:25
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <div class="header flex items-center hide-mobile">
    <router-link to="/" class="header-left-logo flex-none">
      <!-- <p>Beijing</p>
      <p>Oriental</p>
      <p>Orchestra</p> -->
      <img src="/img/logo.jpg" alt="" class="logo">
    </router-link>
    <div class="flex-grow flex justify-end">
      <div class="header-router-link flex-shrink">
        <router-link  :to="item.url" v-for="(item,index) in routerLink" :key="index">{{$t(`header.${item.label}`)}}</router-link>
      </div>
      <img src="/img/header/lang.png" alt="" class="header-lang self-center" @click="change">
    </div>
  </div>
  <div class="flex hide-pc mobile-header justify-between items-center">
     <router-link to="/" class="header-left-logo flex-none">
        <img src="/img/logo.jpg" alt="" class="logo">
      </router-link>
    <div @click="triggerMenu">
      <img :src="`/img/${state.isOpen ? 'close' : 'menu'}@2x.png`" alt="" class="menu">
    </div>
  </div>
  <div class="fixed menu-box inset-x-0 top-88" v-show="state.isOpen">
    <router-link  :to="item.url" v-for="(item,index) in routerLink" :key="index" @click="triggerMenu">{{$t(`header.${item.label}`)}}</router-link>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { useI18n } from 'vue-i18n'
export default {
  props: {
    txtActive:{
      type:Boolean,
      defalut:false
    }
  },
  setup(){
    const { locale } = useI18n({
      useScope:'global'
    })
    const routerLink = [{
      label: 'index',
      url:"/home"
    },{
      label:'activity',
      url:"/activity"
    },{
      label:'news',
      url:"/news"
    },{
      label:'about',
      url:"/about"
    },{
      label:'around',
      url:"/around"
    }]
    const change = ()=> {
      locale.value = locale.value === 'zh' ? 'en' : 'zh';
      localStorage.setItem('lang',locale.value)
    }
    const state = reactive({
      isOpen:false
    })
    const triggerMenu = ()=> {
      state.isOpen = !state.isOpen
      document.body.style.overflow = state.isOpen ? 'hidden' : 'auto'
    }
    return {routerLink:routerLink,change,state,triggerMenu}
  },
}
</script>

<style lang="scss" scoped>
.header{
  height: 120px;
  padding:0 80px ;
  &-left-logo{
    cursor: pointer;
    font-family: 'zyt';
    color: white;
    font-size: 12px;
    font-weight: 200;
    color: #FFFFFF;
    p{
      margin: 0;
      line-height: 1.3;
    }
  }
  &-router-link{
    a{
      color: white;
      font-size: 20px;
      display: inline-block;
      padding: 5px 29px;
      position: relative;
      transition: all 0.3s;
      &:not(:last-child){
        &::after{
          content: "";
          position: absolute;
          height: 40px;
          width: 1px;
          right: 0;
          top: 0;
          background: url('/img/header/line-t.png') no-repeat center center;
          background-size: 100% 100%;
        }
      }
      &.router-link-active{
        color: $activeTxt;
      }
    }
  }
  &-lang{
    width: 32px;
    height: 32px;
    display: block;
    margin-left:285px;
    cursor: pointer;
  }
}
@media screen and (min-width: 1400px) {
  .logo{
    cursor: pointer;
    width: 80px;
  }
}
@media screen and (max-width: 1401px) {
  .mobile-header{
    height: 44px;
    padding: 0 15px;
    background: #202020;
  }

  .logo{
    cursor: pointer;
    width: 30px;
  }
  .menu{
    width: 14px;
  }
  .menu-box{
    padding:0 30px;
    background: #202020;
    z-index: 55;
    a{
      display: block;
      text-align: center;
      line-height: 50px;
      color: white;
      &.router-link-active{
        color: $activeTxt;
      }
    }
  }
}

</style>
